<template>
  <div class="box" @click="togger">
    <!-- <img src="@/assets/gg.png" width="100%" height="100%" alt=""> -->
      <span>点击5次切换文案</span>
      <p >{{currentContent}}</p>
     </div>
</template>

<script>
export default {
  data(){
    return{
      content:
      [
     
      ],
      currentContent:"waterghost-海量头像库-免费供给获取",
      count:0
    }
  },
  methods:{
    togger(){
      if(this.count==5){
        // 刷新文案
        this.content=[];
        for(var i =0;i<5;i++){
        this.$http.post("http://api.tianapi.com/pyqwenan/index?key=38cac4d4a77d17cfa1187e23de59f2ea").then(va=>{
          this.content.push(va.data.newslist[0].content)
           })
        }
          this.currentContent="已切换文案"
          this.count=0
      }
      this.count++;
      
    }
  },
  created(){
    for(var i =0;i<5;i++){
      this.$http.post("http://api.tianapi.com/pyqwenan/index?key=38cac4d4a77d17cfa1187e23de59f2ea").then(va=>{
        this.content.push(va.data.newslist[0].content)
      })
    }
    setInterval(()=>{
      this.currentContent=this.content[parseInt(Math.random()*this.content.length)]
    },6000)
  }
}
</script>

<style scoped lang="less">
    .box{
        width: 100%;
        height: 90px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        position: relative;
        span{
          font-size: 10px;
          position: absolute;
          top: 10px;
          left: 10px;
          color: rgba(144, 146, 143, 0.651);
        }
        p{
          text-align: center;
          line-height: 90px;
          font-size: 20px;
          font-family: hw;
        }
    } 
    @media  screen and (max-width: 1300px) {
      
    .box{
      width: 100% !important;
    }
    p{
      font-size: 15px !important;
    }
  }
</style>